<!--
 * @Author       : Hejh(3010733382@qq.com)
 * @Version      : V1.0
 * @Date         : 2024-05-06 16:26:58
 * @Description  : ACE编辑器
-->
<template>
  <v-ace-editor
    v-model:value="content"
    lang="json"
    theme="github"
    :options="options"
    class="vue-ace-editor"
  />
</template>

<script lang="ts" setup>
import { VAceEditor } from 'vue3-ace-editor'
import '@/utils/aceConfig'
import type { Ace } from 'ace-builds'

const content = ref('') // 显示的内容

const options: Partial<Ace.EditorOptions> = reactive({
  useWorker: true, // 启用语法检查,必须为true
  enableBasicAutocompletion: true, // 自动补全
  enableLiveAutocompletion: true, // 智能补全
  enableSnippets: true, // 启用代码段
  showPrintMargin: false, // 去掉灰色的线，printMarginColumn
  highlightActiveLine: true, // 高亮行
  highlightSelectedWord: true, // 高亮选中的字符
  tabSize: 4, // tab锁进字符
  fontSize: 14, // 设置字号
  wrap: false, // 是否换行
  readonly: false // 是否可编辑
  // minLines: 10, // 最小行数，minLines和maxLines同时设置之后，可以不用给editor再设置高度
  // maxLines: 50, // 最大行数
})
</script>

<style scoped>
.vue-ace-editor {
  /* ace-editor默认没有高度，所以必须设置高度，或者同时设置最小行和最大行使编辑器的高度自动增高 */
  height: 500px;
  width: 100%;
  font-size: 16px;
  border: 1px solid;
}
</style>
